<template>
	<div>
		<van-nav-bar title="标题" left-text="返回" left-arrow @click-left="router.go(-1)">
			<template #right>
				<van-popover v-model:show="showPopover" theme="dark" :actions="actions" placement="bottom-end">
					<template #reference>
						<button><van-icon name="ellipsis" /></button>
					</template>
				</van-popover>
			</template>
		</van-nav-bar>
		<van-swipe lazy-render indicator-color="white">
			<van-swipe-item v-for="item in banner" :key="item">
				<img :src="item" @click="img" />
			</van-swipe-item>
		</van-swipe>

		<div class="cont">
			<p><span>￥</span> {{ list.originprice }}</p>
			<h3>
				<van-tag type="danger">自营</van-tag>
				{{ list.proname }}
			</h3>
		</div>
		<!-- 弹出层 -->
		<van-popup
			v-model:show="show"
			round
			closeable
			position="bottom"
			:style="{ height: '50%' }"
		>
			<div class="go">
				<div class="go-img">
					<img :src="list.img1" />
				</div>
				<div class="go-img2">
					<h4><span>￥ </span>{{ list.originprice }}元</h4>
					<p>剩余 {{ list.stock }} 件</p>
					<p>请选择</p>
				</div>
			</div>
			<div class="go2">
				<p>购买数量</p>
				<van-stepper v-model="num" />
			</div>
			<van-action-bar>
				<van-action-bar-button type="warning" text="加入购物车" @click="add" />
				<van-action-bar-button type="danger" text="立即购买" />
			</van-action-bar>
		</van-popup>
		<van-action-bar>
			<van-action-bar-icon icon="cart-o" text="购物车" @click="router.push('/cart')" />
			<van-action-bar-button type="warning" text="加入购物车" @click="show=true" />
			<van-action-bar-button type="danger" text="立即购买" />
		</van-action-bar>

	</div>
</template>
<script setup lang='ts'>


import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Details,CartAdd } from '@/api/loginapi';
import { ImagePreview } from 'vant';
import { useUserStore } from '@/store/userStore'


const userStore = useUserStore()

const showPopover = ref(false);
  
const router = useRouter()
const route = useRoute()

const banner: any = ref([])
const list: any = ref([])
// 弹出层开关
const show = ref(false)
// 商品数量
const num = ref(1)



// 图片预览
const img = () => {
	ImagePreview({
		images: banner.value,
		closeable: true,
	});
}

// 气泡框
const actions = [
      { text: '选项一',action: 'router.push("/home")', index: 1  },
      { text: '选项二' },
      { text: '选项三' },
    ];

// 详情页列表
onMounted(() => {
	Details({ proid: (route.query.proid) as string }).then((res: any) => {
		console.log(res);
		// console.log(res.data.banners);
		// console.log(res.data.banners[0].split(','));	
		if (res.code) {
			banner.value = res.data.banners[0].split(',')
			list.value = res.data
		}
	})
})


// 添加到购物车
const add = () => {
	CartAdd({
		userid:userStore.userId,
		proid:(route.query.proid) as string,
		num:(num.value).toString()
	}).then((res:any) => {
		console.log(res);
		
	})
	show.value=false
}

</script>
<style lang="scss" scoped>
img {
	width: 100%;
}

.cont {
	width: 90%;
	margin: 0 auto;

	p {
		font-size: 20px;
		color: red;
		font-weight: 600;
		line-height: 30px;

		span {
			font-size: 16px;
		}
	}

	h3 {
		font-weight: 600;
		line-height: 22px;
	}
}
.van-popover__wrapper>button{
	border: none;
	background-color: white;
	color: royalblue;
	font-size: 30px;
}
.go{
	display: flex;
	padding-left: 20px;
	box-sizing: border-box;
	.go-img{
		width: 120px;
		height: 180px;
		display: flex;
		justify-content: center;
		align-items: center;
		img {
			width: 80%;
		}
	}
	.go-img2{
		display: flex;
	
		justify-content: center;
		flex-direction: column;
		h4{
			color: red;
		}
		p:nth-child(2){
			font-size: 16px;
			line-height: 60px;
		}
	}
}
.go2{
	width: 92%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>